import React from 'react';
import './App.css';
import TodoForm from './components/TodoForm';
import TodoList from './components/TodoList';
import TodoFilter from './components/TodoFilter';
import ThemeToggle from './components/ThemeToggle';
import { ThemeProvider } from './context/ThemeContext';
import { useTodoManager } from './hooks/useTodoManager';
import TodoStats from './components/TodoStats';
import TodoHelp from './components/TodoHelp';
import Demo1 from './demos/Demo1';
import Demo2 from './demos/Demo2';
import Demo3 from './demos/Demo3';

function App() {
  const { 
    todos, 
    filter, 
    addTodo, 
    toggleTodo, 
    deleteTodo, 
    setFilter,
    editTodo 
  } = useTodoManager();

  const [currentPage, setCurrentPage] = React.useState('home');

  const navigateTo = (page) => {
    setCurrentPage(page);
  };

  const renderContent = () => {
    switch (currentPage) {
      case 'stats':
        return <TodoStats todos={todos} />;
      case 'help':
        return <TodoHelp />;
      case 'demo1':
        return <Demo1 />;
      case 'demo2':
        return <Demo2 />;
      case 'demo3':
        return <Demo3 />;
      default:
        return (
          <>
            <TodoForm addTodo={addTodo} />
            <TodoFilter filter={filter} setFilter={setFilter} />
            <TodoList 
              todos={todos} 
              toggleTodo={toggleTodo} 
              deleteTodo={deleteTodo}
              editTodo={editTodo}
            />
          </>
        );
    }
  };

  return (
    <ThemeProvider>
      <div className="app">
        <div className="app-header">
          <h1>待办事项</h1>
          <ThemeToggle />
        </div>
        
        <nav className="app-nav">
          <button onClick={() => navigateTo('home')} className={currentPage === 'home' ? 'active' : ''}>首页</button>
          <button onClick={() => navigateTo('stats')} className={currentPage === 'stats' ? 'active' : ''}>统计</button>
          <button onClick={() => navigateTo('help')} className={currentPage === 'help' ? 'active' : ''}>帮助</button>
          <button onClick={() => navigateTo('demo1')} className={currentPage === 'demo1' ? 'active' : ''}>基础语法</button>
          <button onClick={() => navigateTo('demo2')} className={currentPage === 'demo2' ? 'active' : ''}>小练习</button>
          <button onClick={() => navigateTo('demo3')} className={currentPage === 'demo3' ? 'active' : ''}>路由和状态</button>
        </nav>
        
        {renderContent()}
      </div>
    </ThemeProvider>
  );
}

export default App; 